<template>
	<view>
		<view class="change">
			<view class="changeTop-title">请选择类型</view>
			<radio-group @change="radioChange">
				<label v-for="(item,index) in radioList" :key="index">
					<radio color="#E6B873" :value="item.value" /><text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		<view class="change">
			<view class="changeTop-title">相关描述</view>
			<textarea v-model="describe" auto-height maxlength="200" placeholder="客观~请描述您遇到的问题（最多只能输入200个字）" @input="changeInput" />
			<view class="imgs">
				<view class="imgsCont" v-for="(item,index) in imgs" :key="index">
					<image :src="item"></image>
					<i class="iconfont iconcha" @tap="delImage(index)"></i>
				</view>
				<view class="uploadImg" @tap="chooseImage"><i class="iconfont iconpaizhao"></i></view>
			</view>
		</view>
		<view class="change">
			<view class="changeTop-title">联系方式</view>
			<input type="text" v-model="phone" placeholder="请输入您的联系电话" />
		</view>
		<view class="bottom"><view class="saveBtn">提交</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				radioList: [{
					name: '产品功能问题反馈',
					value: '1'
				}, {
					name: '建议及意见反馈',
					value: '2'
				}, {
					name: '投诉客服其他问题',
					value: '3'
				}],
				phone: '', //联系电话
				describe: '', //相关描述
				imgs: [],
			}
		},
		methods: {
			// 选择售后类型
			radioChange: function(evt) {
				console.log(evt.target.value);
			},
			// 选择申请原因
			radioChangeDialog: function(evt) {
				console.log(evt.target.value);
			},
			// 改变相关描述内容
			changeInput(e) {
				if (e.detail.cursor >= 200) {
					this.util.showDialog('最多只能输入200个字');
				}
			},
			// 选择图片上传修改
			chooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						_this.$api.apifile('user/currency.basic/UploadUserImg', { //上传图片
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								var image = result.data.visit_path;
								_this.imgs.push(image);
							} else {
								_this.util.showDialog('上传失败,请重新上传');
							}
						})
					}
				});
			},
			// 删除图片
			delImage(index) {
				this.imgs.splice(index,1);
			}
		}
	}
</script>

<style>
	page{
		background: #FFFFFF;
		padding-bottom: 200upx;
	}
	.change {
		padding: 0 30upx 20upx;
		width: calc(100% - 60upx);
		background: #FFFFFF;
	}

	.changeTop-title {
		color: #333333;
		font-style: 32upx;
		font-weight: bold;
		padding: 20upx 0;
	}

	input,textarea {
		color: #999999;
		font-size: 24upx;
		padding: 30upx 20upx;
		width: calc(100% - 40upx);
		background: #F7F7F7;
		border-radius: 10upx;
	}
	.imgs{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 30upx;
	}
	.imgsCont{
		position: relative;
		margin: 0 24upx 20upx 0;
	}
	image{
		width: 110upx;
		height: 110upx;
		border: 2upx solid #CDCDCD;
	}
	.iconcha{
		color: #FF7171;
		position: absolute;
		right: -12upx;
		top: -16upx;
	}
	.uploadImg{
		width: 110upx;
		height: 110upx;
		line-height: 110upx;
		text-align: center;
		border: 2upx solid #CDCDCD;
		margin-bottom: 28upx;
	}
	.uploadImg .iconfont{
		color: #CDCDCD;
		font-size: 40upx;
	}
	.saveBtn{
		margin: 30upx;
	}
</style>
